<template>
  <!-- 头部 -->
  <el-dialog title="货道设置"
             :visible="outerVisibleCarousel"
             :before-close="outerVisibleCarouselFn">
    <div class="dialog_head">
      <div>
        <span>货道行数：{{line}}</span>
        <span>货道列数：{{list}}</span>
        <span>货道容量（个）：{{CarglaneList[0]?.maxCapacity}}</span>
      </div>
      <button type="primary"
              @click="innerVisibleFn">智能排货</button>
    </div>
    <!-- 头部 -->

    <!-- 跑马灯 -->
    <div class="baseContent">
      <div class="prev"
           @click="arrowclick('prev')"><i class="el-icon-arrow-left"></i></div>
      <el-container>
        <el-aside width="860px">

          <el-carousel indicator-position="outside"
                       :autoplay="false"
                       ref="cardshow"
                       arrow="never">
            <el-carousel-item>
              <el-row :gutter="8">

                <el-col :span="5"
                        v-for="(item,index) in CarglaneListOne"
                        :key="index">
                  <div class="grid-content bg-purple">
                    <span>{{item.channelCode}}</span>
                    <div class="grid-content_top">

                      <img :src="item.sku?.skuImage||item.sku?.image ? item.sku?.skuImage||item.sku?.image :'' "
                           alt="">
                      <p>{{item.sku?.skuName ? item.sku?.skuName :'暂无商品'}}</p>
                    </div>
                    <div class="grid-content_bottom">
                      <p class="add_bottom"
                         @click="addshopFn1(item)">添加</p>
                      <p class="del_bottom"
                         :class="item.sku===null ? 'pcolor' :'' "
                         @click="delFn1(item)">删除</p>
                    </div>
                  </div>
                </el-col>

              </el-row>
            </el-carousel-item>

            <el-carousel-item v-if="list !== '5' ">

              <el-row :gutter="8">

                <el-col :span="5"
                        v-for="(item,index) in CarglaneListTwo"
                        :key="index">
                  <div class="grid-content bg-purple">
                    <span>{{item.channelCode}}</span>
                    <div class="grid-content_top">

                      <img :src="item.sku?.skuImage||item.sku?.image ? item.sku?.skuImage||item.sku?.image :'' "
                           alt="">
                      <p>{{item.sku?.skuName ? item.sku?.skuName :'暂无商品'}}</p>
                    </div>
                    <div class="grid-content_bottom">
                      <p class="add_bottom"
                         @click="addshopFn2(item)">添加</p>
                      <p class="del_bottom"
                         :class="item.sku===null ? 'pcolor' :'' "
                         @click="delFn2(item)">删除</p>
                    </div>
                  </div>
                </el-col>

              </el-row>

            </el-carousel-item>
          </el-carousel>

        </el-aside>
      </el-container>
      <div class="next"
           @click="arrowclick('next')"><i class="el-icon-arrow-right"></i></div>
    </div>
    <!-- 跑马灯 -->

    <!-- 底部 -->

    <div slot="footer"
         class="dialog-footer">
      <el-button @click="outerVisibleCarouselFn">确认</el-button>

      <!-- 底部 -->

      <!-- 内部排货 -->
      <el-dialog width="50%"
                 title="智能排货"
                 :visible.sync="innerVisible"
                 append-to-body>
        <div class="business_box">
          <p class="business_top">该区域属于{{businessname}}商圈适合销售一下的商品：</p>

          <div class="business_bottom">
            <div v-for="(item,index) in top10List"
                 :key="index">
              <img :src="item.image"
                   alt="">
              <p>{{item.skuName}}</p>
            </div>
          </div>

        </div>
        <div class="footet"><button @click="Adopt">采纳建议</button></div>
      </el-dialog>
      <!-- 内部排货 -->

      <!-- 添加弹框 -->
      <el-dialog width="50%"
                 title="选择商品"
                 :visible.sync="addshop"
                 append-to-body>

        <div class="business_box">
          <div class="prev1"
               @click="arrowclick('prev1')"><i class="el-icon-arrow-left"></i></div>
          <p class="business_top">
            <el-card class="box-card box_top">
              <span>商品名称:</span>
              <el-input v-model="shoptext"
                        placeholder="请输入"
                        @input="chaxun"></el-input>

              <button class="btn"
                      @click="chaxun"> <i class="el-icon-search"></i> 查询</button>
            </el-card>
          </p>

          <el-carousel indicator-position="outside"
                       :autoplay="false"
                       ref="cardshow"
                       arrow="never">
            <el-carousel-item>

              <div class="item11"
                   v-for="(item,index) in addshopList.currentPageRecords"
                   :key="index">
                <!-- 对勾 -->
                <div class="addcolor"
                     ref="sm_box"></div>
                <!-- 对勾 -->
                <div class="business_bottom1">
                  <div class="sm_box"
                       @click="addShopFn(item,index)">
                    <img :src="item.skuImage"
                         alt="">
                    <p>{{item.brandName}}</p>
                  </div>

                </div>
              </div>
            </el-carousel-item>

          </el-carousel>
          <div class="next1"
               @click="arrowclick('next1')"><i class="el-icon-arrow-right"></i></div>
        </div>
        <div class="footet1"><button @click="shopok"
                  :class="flagimg? 'flagimg' :'' ">确认</button></div>
      </el-dialog>
      <!-- 内部排货 -->
    </div>
  </el-dialog>
</template>

<script>
import { Loading } from 'element-ui'
import { AlterCarglaneDetail, businessType, getshopSearch, getTop10 } from '@/api/fixing/fixing'
import { mapState } from 'vuex'
export default {
  props: ['outerVisibleCarousel'],
  data () {
    return {
      shoptext: '',
      addshop: false,
      innerVisible: false,
      count: 0,
      CarglaneListDetail: [],
      businessname: '',
      top10List: [],
      addshopList: {},
      pageIndex: 1,
      flagArr: [],
      flagimg: true,
      Outer: {},
      innerCode: '',
      channelList: [],
      Top10Date: []

    }
  },
  methods: {
    addShopFn (item, index) {
      // this.$refs.sm_box.style.display="none"
      // eslint-disable-next-line no-return-assign
      this.$refs.sm_box.forEach(item => item.style.display = 'none')
      this.$refs.sm_box[index].style.display = 'block'
      this.flagimg = false
      this.flagArr = item
      // console.log(this.Outer);
      // console.log(this.flagArr);
    },
    // 点击添加商品获取数据
    async getdate (val = 1) {
      const res = await getshopSearch({
        pageSize: 10,
        pageIndex: val
      })
      this.addshopList = res.data
    },
    shopok () {
      if (!this.flagimg) {
        this.Outer.sku = this.flagArr
        const arr = Array(this.Outer).map(item => {
          return {
            channelCode: item.channelCode,
            skuId: item.sku.skuId
          }
        })
        this.channelList.push(...arr)
        console.log(this.channelList)
        // arr是添加好的数据
        this.addshop = false
        // eslint-disable-next-line no-return-assign
        this.$refs.sm_box.forEach(item => item.style.display = 'none')
      }
    },
    delFn1 (item) {
      if (item.sku) {
        this.innerCode = item.innerCode
        item.sku = null
        console.log(item)
        const arr = []
        arr.push(item)
        const arr1 = arr.map(item => {
          return {
            channelCode: item.channelCode,
            skuId: '0'
          }
        })
        console.log(arr1)
        this.channelList.push(...arr1)
        console.log(this.channelList)
      }
    },
    delFn2 (item) {
      if (item.sku) {
        this.innerCode = item.innerCode
        item.sku = null
        console.log(item)
        const arr = []
        arr.push(item)
        const arr1 = arr.map(item => {
          return {
            channelCode: item.channelCode,
            skuId: '0'
          }
        })
        console.log(arr1)
        this.channelList.push(...arr1)
        console.log(this.channelList)
      }
    },
    async chaxun () {
      clearTimeout(window.timer)
      window.timer = setTimeout(async () => {
        const res = await getshopSearch({
          pageSize: 10,
          pageIndex: 1,
          skuName: this.shoptext
        })
        this.addshopList = res.data
        console.log(res.data)
        this.flagimg = true
        // eslint-disable-next-line no-return-assign
        this.$refs.sm_box.forEach(item => item.style.display = 'none')
      }, 1000)
    },
    addshopFn1 (item) {
      this.getdate()
      this.innerCode = item.innerCode
      this.Outer = item
      this.addshop = true
    },
    addshopFn2 (item) {
      this.getdate()
      this.innerCode = item.innerCode
      this.Outer = item
      this.addshop = true
    },
    // 采纳建议
    Adopt () {
      console.log(this.Top10Date)
      if (this.Top10Date.length !== 0) {
        const leftarr = []
        const rightarr = []
        this.Top10Date.forEach((item, index) => {
          if (index < 5) {
            leftarr.push(item)
          } else {
            rightarr.push(item)
          }
        })
        this.$store.commit('Cargolane/updataCarglane', { leftarr, rightarr })
        console.log(this.CarglaneListOne)
        this.innerCode = this.CarglaneListOne[0].innerCode
        // eslint-disable-next-line array-callback-return
        const arr = this.CarglaneListOne.map((item, index) => {
          if (index < 5) {
            return {
              channelCode: item.channelCode,
              skuId: item.sku.skuId
            }
          }
        }).filter(item => item !== undefined)

        // eslint-disable-next-line array-callback-return
        const arr1 = this.CarglaneListTwo.map((item, index) => {
          if (index < 5) {
            return {
              channelCode: item.channelCode,
              skuId: item.sku.skuId
            }
          }
        }).filter(item => item !== undefined)
        console.log(arr)
        console.log(arr1)
        this.channelList.push(...arr, ...arr1)
        this.innerVisible = false
      } else {
        this.$message('暂无建议')
      }
    },
    // 采纳建议
    async innerVisibleFn () {
      const res = await businessType({
        num: this.businessId
      })
      console.log(res.data)
      this.businessname = res.data
      const data = await getTop10({
        num: this.businessId
      })
      this.Top10Date = data.data
      this.top10List = data.data.map(item => {
        return {
          image: item.image,
          skuName: item.skuName
        }
      })
      this.innerVisible = true
    },
    outerVisibleCarouselFn () {
      console.log(this.channelList)
      this.AlterCarglaneDetailFn(this.innerCode, this.channelList)
      this.$store.commit('Cargolane/delgetCarglaneDetaildata')
      this.$emit('update:outerVisibleCarousel', false)
    },
    load () {
      this.count += 2
    },
    // 控制上一页，下一页跳转
    arrowclick (val) {
      if (val === 'next') {
        this.$refs.cardshow.next()
      } else {
        this.$refs.cardshow.prev()
      }
      if (val === 'next1') {
        if (this.pageIndex < this.addshopList.totalPage) {
          this.pageIndex++
          this.getdate(this.pageIndex)
          console.log('下一页', this.pageIndex)
          this.flagimg = true
          // eslint-disable-next-line no-return-assign
          this.$refs.sm_box.forEach(item => item.style.display = 'none')
        } else {
          this.$message('已经是最后一页了')
        }
        // this.getdate()
      } else if (val === 'prev1') {
        if (this.pageIndex > 1) {
          this.pageIndex--
          this.getdate(this.pageIndex)
          console.log('上一页', this.pageIndex)
          this.flagimg = true
          // eslint-disable-next-line no-return-assign
          this.$refs.sm_box.forEach(item => item.style.display = 'none')
        } else {
          this.$message('已经是第一页了')
        }
      }
    },

    async AlterCarglaneDetailFn (innerCode, channelList) {
      const loadingInstance = Loading.service()
      const res = await AlterCarglaneDetail({
        innerCode,
        channelList
      })
      this.channelList = []
      loadingInstance.close()
      console.log(res)
    }
  },
  computed: {
    // eslint-disable-next-line vue/return-in-computed-property
    line () {
      if (this.CarglaneList.length !== 0) {
        const line = this.CarglaneList.slice(-1)[0].channelCode
        return line.split('-')[0]
      }
    },
    // eslint-disable-next-line vue/return-in-computed-property
    list () {
      if (this.CarglaneList.length !== 0) {
        const line = this.CarglaneList.slice(-1)[0].channelCode
        return line.split('-')[1]
      }
    },
    ...mapState('Cargolane', ['CarglaneList', 'CarglaneListOne', 'CarglaneListTwo', 'businessId'])

  }
}
</script>

<style scoped lang="less">
.flagimg {
  opacity: 0.3;
  cursor: not-allowed !important;
}
.addcolor {
  background: no-repeat
    url();
  width: 36px;
  height: 36px;
  position: absolute;
  display: none;
}
.item11 {
  height: 168px !important;
  width: 145px;
  margin: 4px;
  .business_bottom1 {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    width: 100%;
    .sm_box {
      display: flex;
      width: 100%;

      background-color: #f6f7fb;
      flex-direction: column;
      align-items: center;
      text-align: center;
      p {
        width: 96px;
      }
    }
    img {
      width: 80px;
      height: 80px;
      margin-top: 15px;
      margin-bottom: 5px;
    }
  }
}
.footet1 {
  height: 40px;
  margin-top: -74px;
  margin-bottom: 10px;
  text-align: center;
  position: relative;
  button {
    width: 80px !important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
    position: absolute;
    z-index: 999;
    left: 50%;
    transform: translateX(-50%);
  }
}
.box_top {
  ::v-deep .el-card__body {
    height: 40px;
    line-height: 60px;
    padding: 0 10px 25px 10px;
    span {
      text-align: right;
      vertical-align: middle;
      font-size: 14px;
      color: #606266;
      line-height: 40px;
      padding: 0 12px 0 0;
    }
    .el-input {
      width: 300px;
      margin-left: 10px;
    }
    .btn {
      height: 38px;
      width: 80px;
      margin-left: 20px;
      border: none;
      color: #fff;
      background-color: #6c8bf6;
      border-radius: 4px;
      font-weight: 400px;
      font-size: 13px;
      cursor: pointer;
      text-align: center;
      line-height: 38px;
    }
  }
}
.business_box {
  position: relative;
  .prev1 {
    position: absolute;
    top: 50%;
    cursor: pointer;
    left: 10px;
    font-size: 35px;
  }
  .next1 {
    position: absolute;
    top: 50%;
    right: 10px;
    cursor: pointer;
    font-size: 35px;
  }
}
.footet {
  height: 40px;
  margin-top: 10px;
  text-align: center;
  button {
    width: 80px !important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
    border: none;
    border-radius: 6px;
    color: #fff;
    cursor: pointer;
  }
}
.business_box {
  padding: 5px 20px 10px 20px;
  .business_top {
    p {
      color: #666;
      font-size: 14px;
    }
  }
  .business_bottom {
    display: flex;
    flex-wrap: wrap;
    div {
      display: flex;
      width: 18%;
      margin: 8px;
      background-color: #f6f7fb;
      flex-direction: column;
      align-items: center;
    }
    img {
      width: 80px;
      height: 80px;
      margin-top: 15px;
      margin-bottom: 5px;
    }
  }
}
::v-deep .el-dialog__footer {
  text-align: center !important;
}
::v-deep .el-carousel__container {
  height: 430px !important;
}
::v-deep .el-carousel__item.is-active.is-animating {
  overflow: scroll;
  height: 100%;
  flex-direction: column;
  margin-bottom: 400px !important;
}
.pcolor {
  color: #f9dbdb !important;
  cursor: not-allowed !important;
}
.active {
  display: none !important;
}
.baseContent {
  position: relative;
  // 0-----------
  ::v-deep .el-container {
    justify-content: center !important;
    flex-direction: column;
  }
  .prev {
    position: absolute;
    left: -20px;
    top: 40%;
    cursor: pointer;
    font-size: 50px;
    z-index: 999;
  }
  .next {
    position: absolute;
    right: -35px;
    top: 40%;
    z-index: 999;
    cursor: pointer;
    font-size: 50px;
  }
  .carousel {
    width: 1110px;
    // height: 347px;
    margin: 0 auto;

    ::v-deep .el-carousel__indicators--outside {
      background-color: #323233 !important;
    }
  }
}

@media screen and (max-width: 992px) {
}

// ::v-deep .el-carousel__arrow--left{
//   position:fixed ;
//   top: 300px;
// }
::v-deep .el-carousel__container {
  // height: 700px !important;
  // padding-bottom: 1500px;
}

::v-deep .el-aside {
}
::v-deep .el-col {
  border-radius: 4px;
  width: 164px !important;
  margin-top: 10px;
}
::v-deep .el-carousel__item.is-active.is-animating {
  display: flex;
  flex-wrap: wrap;
  align-content: space-around;
}
::v-deep .el-carousel.el-carousel--horizontal {
  margin-top: 20px !important;
  width: 95%;
  margin: 0 auto;
}
::v-deep .el-dialog {
  border-radius: 8px !important;
}
::v-deep .el-button.el-button--default {
  width: 80px !important;
  height: 36px;
  padding: 0;
  background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
  border: none;
  color: #fff;
}
::v-deep .el-dialog__body {
  padding: 10px 30px 10px 20px !important;
}
.dialog_head {
  width: 96%;
  height: 40px;
  line-height: 40px;
  font-size: 13px;
  display: flex;
  justify-content: space-between;
  background-color: #f4f6fa;
  padding: 10px 34px 10px 0px;
  span {
    margin-left: 39px;
  }
  button {
    align-items: center;
    cursor: pointer;
    min-width: 80px;
    border-radius: 5px;
    height: 36px;
    padding: 0;
    background-color: #5f84ff;
    border: none;
    color: #fff;
  }
}
::v-deep .el-carousel__indicator--horizontal {
  display: none !important;
}
.el-carousel__item h3 {
  font-size: 18px;
  opacity: 0.75;
  line-height: 300px;
  margin: 0;
}

.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
}
.bg-purple-dark {
  background: #f6f7fb;
}
.bg-purple {
  background: #f6f7fb;
}
.bg-purple-light {
  background: #f6f7fb;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
  margin-left: 14px;
  position: relative;
  span {
    position: absolute;
    font-size: 12px;
    width: 43px;
    height: 23px;
    text-align: center;
    line-height: 23px;
    background-color: #869be7;
    color: #fff;
    border-top-right-radius: 24px;
    border-bottom-right-radius: 24px;
    top: 10px;
  }
  .grid-content_top {
    text-align: center;
    img {
      display: inline-block;
      width: 84px;
      height: 78px;
      line-height: 78px;
      margin-top: 30px;
      text-align: center;
      object-fit: contain;
    }
    p {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  .grid-content_bottom {
    height: 40px;
    line-height: 40px;
    display: flex;
    justify-content: space-evenly;
    background-color: #fff;
    box-shadow: -1px 2px 4px 0px rgb(240, 239, 239);
    .add_bottom {
      color: #5f84ff;
      cursor: pointer;
      padding: 0;
      margin: 0;
    }
    .del_bottom {
      margin-left: 14px;
      color: #ec6660;
      cursor: pointer;
      padding: 0;
      margin: 0;
    }
  }
}
.row-bg {
  padding: 10px 0;
  background-color: #f6f7fb;
}
</style>
